<template>
  <div class="block">
    <el-pagination
      :current-page="current"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pages"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      current: 1, // 当前页
      pages: 2, // 页数
      total: 1
    }
  },
  created() {
    this.handleCurrentChange()
  },
  methods: {
    // 分页器页码
    // 点击切换页数、页码改变
    // 通知父组件
    // 更细页面数据
    handleCurrentChange(val) {
      this.current = +val
      this.pages = +this.data.pages
      this.total = +this.data.total
      this.$emit('update', this.current)
    }
  }
}
</script>

<style>
 .block {
    margin: 20px 0 0;
    text-align: center;
  }
</style>
